<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>App1</title> <link rel="stylesheet“ type="text/css" href="tundra.css"/> <script type="text/javascript" djConfig="parseOnLoad: true" src="dojo.js"> </script> <script type="text/javascript"> dojo.require("dijit.form.DateTextBox"); </script> </head> <body class="tundra"> <h1>Application One</h1> <p>Enter a date below:</p> <input dojoType="dijit.form.DateTextBox"/> </body> </html>
<link rel="stylesheet"
This imports the tundra.css stylesheet. Dojo 1.0 has the notion of themes. In this application, we are using the tundra theme.type="text/css“ href="dojo-release-1.0.0/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript"
This imports the core Dojo library from dojo.js.djConfig="parseOnLoad: true“ src="dojo-release-1.0.0/dojo/dojo.js"> </script> The djConfig attribute allows us to set various configuration properties of Dojo. Here, we set the parseOnLoad property to true. This causes Dojo to attach an onload event handler for the body. From that event handler, Dojo traverses the DOM tree and instantiates the widgets whenever a widget markup is located. We will soon find out how to create a widget. Note: The default value of parseOnLoad is false. If you do not set it to true, by default, system will not create any widgets.
<script type="text/javascript">
The dojo.require() function imports the JavaScript code for a specific package. dojo.require("dijit.form.DateTextBox"); </script> This allows you to import only the portion of Dojo that you need. In this case, we are importing the code for the dijit.form.DateTextBox widget. Note: To use any widget in a page, you must import its code using dojo.require().
<body class="tundra">
In this line, we are setting the theme for the application. As you can see, the process is quite simple. We set the class of the body to the name of the theme – "tundra" in this case
<input dojoType="dijit.form.DateTextBox"/>
This markup inserts a DateTextBox widget in the page. All form widgets are added using the <input>or <select> tag and the dojoType attribute.When Dojo traverses the DOM tree, it detects the existence of the dojoType attribute. This causes Dojo to create the widget by creating additional DOM elements near the <input> element. |